<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    
    <style>
    
        input[type='text'],input[type='password'],button{
            margin-top: 20px;  
            height: 25px;
        }
        .login_article{
            background-color:rgba(255, 255, 255, 0.5);
            border: 1px solid #ccc;
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            width: 385px;
            height: 170px;
            margin: auto;
        }
        .login_article_image{
            float: left;
            margin: 20px;
        }
        #btn_login{
            margin-left: 140px;
        }
        .errorMsg{
            margin-top: 10px;
        }
        body{
            background-image:url("img/misaka001.png");
            background-repeat:no-repeat;
            background-attachment: fixed;
            background-size:cover;
        }
        .img_box{
            float: right;
            
            width: 27px;
            height: 50px;
            margin-top: -1px;
            margin-right: 2px;
            background-image: url(img/superscript.jpg);
            background-position: -30px -180px;
        }
    </style>

</head>
<body>
    
        <article class="login_article">
            <aside class="img_box"></aside>
            <aside class="login_article_image">

                <img src="img/misaka-000.png" height="110px;">
                <div class="errorMsg">用户密码错误！</div>
            </aside>

            <section>
                <form action="" method="POST">
                    用户名:<input type="text" name="userName"><br>
                    密&nbsp;&nbsp;&nbsp;码:<input type="password" name="password"<br>
                    <button id="btn_login" type="submit">登录</button>

                </form>
            </section>
        </article>
</body>
</html>